import { FC,useEffect, useState } from 'react';
import {news,delnews} from '../../apis/news'
import  '../../static/css/newsList.css'
import { Form, Input, Select, Button,Table, message } from 'antd';
import type { ColumnsType, TablePaginationConfig } from 'antd/lib/table';
import type { TableRowSelection } from 'antd/lib/table/interface';
interface IParams {
  page:number,
  pageSize:number,
  idortitle ?:string
}


// 删除
const del= (news_id:any)=>{
  return ()=>{
    console.log(news_id.news_id);
    dels(news_id.news_id)
  }
}
const dels = async (news_id:any)=>{
  console.log(123456,news_id);
  const res:any = await delnews({news_id:news_id})
  console.log(res);
  // if(res.code==='00000'){
  //   message.success("删除成功")
  // }
}


const edit=(id:number)=>{

  return ()=>{

    
  }

}
const details=(id:number)=>{

  return ()=>{
    alert(id);
  }

}
const NewsList: FC<any> = (props:any): JSX.Element => {
  const [params,setParams] = useState<IParams>({page:1,pageSize:10});
  const [list,newList] = useState<any>([])

  const columns: ColumnsType<any> = [
    {
      title: '标题',
      dataIndex: 'title',
    },
    {
      title: '作者',
      dataIndex: 'author',
    },
    {
      title: '关键字',
      dataIndex: 'keywords',
    },
    {
      title: '操作',
      render:(text:number)=>(<div className='editdiv'>
        <Button onClick={edit(text)} className='butt'  type="primary">修改</Button>
        <Button  onClick={del(text)} className='butt'  type="primary" danger>删除</Button>
        <Button onClick={details(text)} className='butt' type="default" >详情</Button>
      </div>)
    },
  ];
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection: TableRowSelection<any> = {
    selectedRowKeys,
    onChange: onSelectChange,
    selections: [
      Table.SELECTION_ALL,
      Table.SELECTION_INVERT,
      Table.SELECTION_NONE,
      {
        key: 'odd',
        text: 'Select Odd Row',
        onSelect: changableRowKeys => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changableRowKeys.filter((_, index) => {
            if (index % 2 !== 0) {
              return false;
            }
            return true;
          });
          setSelectedRowKeys(newSelectedRowKeys);
        },
      },
      {
        key: 'even',
        text: 'Select Even Row',
        onSelect: changableRowKeys => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changableRowKeys.filter((_, index) => {
            if (index % 2 !== 0) {
              return true;
            }
            return false;
          });
          setSelectedRowKeys(newSelectedRowKeys);
        },
      },
    ],
  };
  // 请求接口的数据
    const getData = async () =>{
      const res:any = await news(params).catch(()=>{});
      if(res.code=='00000'){
        newList(res.data);
        setPagination({...pagination,total:res.total})
      }
        console.log(res); 
    }
    const SizeChange = (current:number,pageSize:number)=>{

      setPagination({...pagination,pageSize:current})
      setParams({...params,page:current,pageSize})
      
    }
    const pageonChange = (e:number) =>{
      console.log(e);
      setPagination({...pagination,current:e})
      // setParams({...params,page:e})
    }
    const [pagination, setPagination] = useState<TablePaginationConfig>({
      current: 1,
      pageSize: 5,
      total:0,
    });
    const onSearch = (e:any)=>{
      console.log(e);
      setParams({...params,page:1,...e})
    }
    useEffect(()=>{
      getData()
    },[params])

    return (
      <div>
        <p className="student">校园动态列表</p>
        <div>
        <Form
            name="customized_form_controls"
            layout="inline"
            onFinish={onSearch}
        >
          <Form.Item name="idortitle">
            <Input placeholder="请输入查询的内容"></Input>
          </Form.Item>
          <Form.Item>
            <Button className="btn" type="primary" htmlType="submit">
              查询
            </Button>
            <Button className="btn" type="primary" htmlType="submit">
              添加
            </Button>
            <Button className="btn" type="primary" danger>
              批量删除
            </Button>
          </Form.Item>
        </Form>
        </div>
        <Table rowKey='news_id' pagination={{...pagination,onShowSizeChange:SizeChange,onChange:pageonChange}} rowSelection={rowSelection} columns={columns} dataSource={list} />
      </div>
    )
}
export default NewsList;